<template>
  <div>
    <h1>state</h1>
    <!-- <h2>{{ $store.state.user.username }}</h2> -->
    <h2>{{ username }}</h2>
    <h2>{{ userAge }}</h2>
    <hr />
    <h1>mutations</h1>
    <button @click="$store.commit('user/updateName', 'chann')">
      updateName
    </button>
    <hr />
    <h1>getters</h1>
    <h2>userGetters:{{ userGetters }}</h2>
    <hr />
    <h1>mutations</h1>
    <h2>主文件的count:{{ $store.state.count }}</h2>
    <h2>user的num:{{ $store.state.user.num }}</h2>
    <button @click="increment">user/increment</button>
    <hr />
    <button @click="$store.dispatch('user/userActionsRoot')">root:true</button>
    <button @click="userActions">userActions</button>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions, mapGetters } =
  createNamespacedHelpers("user");
export default {
  computed: {
    ...mapState( ["username", "userAge"]),
    ...mapGetters( ["userGetters"]),
  },
  methods: {
    ...mapMutations( ["increment"]),
    ...mapActions( ["userActions"]),
  },
};
</script>

<style lang="scss" scoped>
</style>